<script lang='ts' setup>
import layoutDrag from '../container/fat-form-create-drag-container-editor.vue';
import { IFormConfig, IFormItem } from '../type'

interface Props {
  list: IFormItem[]
}
interface Emit {
  (event: 'update:list', data: IFormItem[]): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const formConfig = inject<IFormConfig>("formConfig")
const list = computed({
  get() {
    return props.list
  },
  set(value) {
    emit('update:list', value)
  }
})
</script>

<template>
  <el-form :label-position="formConfig?.labelPosition" class="fat-form-editor-form">
    <layoutDrag v-model:list="list" item-key="id" :sort="true" :put="true" class="drag-container" />
  </el-form>
</template>

<style lang='scss' scoped>
.fat-form-editor-form {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.drag-container {
  min-height: 100%;
  background-color: #eee;
}
</style>